<template>
    <div class="container-item" @click="sendIdToParent">
        <div class="item-1">
            <img :src="coverpath">
        </div>
        <div class="item-2">
            <div v-ellipses>{{title}}</div>
            <div class="score">{{score}}</div>
        </div>
    </div>
</template>

<script>
export default {
    props:['title','coverpath','score','id'],
    methods:{
        sendIdToParent(){
            this.$emit('makeParent',this.id)
        }
    }
}
</script>

<style lang="scss">
    .container-item{
        position: relative;
        display: flex;
        flex-direction: column;
        width: 135px;
        height: 220px;
        border: 1px solid #ccc;
        margin: 5px;
        .item-1{
            height: 177px;
            overflow: hidden;
            img{
                width: 135px;
            }
        }
        .item-2{
            display: flex;
            align-items: center;
            justify-content: center;
            flex-grow: 1;
            .score{
                font-style: italic;
                color: #FF9233;
            }
        }
    }
</style>